<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>	
		#header{
			width:100%;
			height:50px;
			/* 边框、背景颜色：查选择器是否选中，效果是否正确 */
			bord er:1px solid black;
			background-color: #c80b80;
		}
		#body{
			width:100%;
			height:900px;
			/* 边框、背景颜色：查选择器是否选中，效果是否正确 */
			bord er:1px solid black;
			background-color: #c872c7;
		}
		#footer{
			width:100%;
			height:200px;
			/* 边框、背景颜色：查选择器是否选中，效果是否正确 */
			bord er:1px solid black;
			background-color: #c8aec6;
		}
		</style>
	</head>
	<body>
		<!-- ①元素选择器：以元素名作为选择器，抓取元素
		     ②伪类选择器：原选择器附加效果。：hover鼠标悬停
			                             ：before 在.... 前 添加文本，一般与content属性
										 ：after 在.... 后 添加文本，一般与content属性
			③类选择器：以1个或多个别名作为选择器，抓取元素【页面微调】
			④通用选择器：抓取页面上所有元素，规范页面【盒模型，字体】
			⑤ id 选择器：用在页面结构搭建【唯一性，切片】
		 语法：html 前标记id="header"
		       css #header   别名
			id选择器与class选择器的区别
			搭建页面结构，根据结构中小范围微调
		 -->
		 <div id="header"></div>
		 <!-- 作业：网页主体900px 网页尾巴200px 颜色自定-->
		 <div id="body"></div>
		 <div id="footer"></div>
	</body>
</html>